<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="./lib/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./lib/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="./lib/scroll.js"></script>
    <title>聊天机器人</title>
  </head>

  <body>
    <div class="wrap">
      <!-- 头部 Header 区域 -->
      <div class="header">
        <h3>小思同学</h3>
        <img src="img/person01.png" alt="icon" />
      </div>
      <!-- 中间 聊天内容区域 -->
      <div class="main">
        <ul class="talk_list" style="top: 0px">
          <li class="left_word">
            <img src="img/person01.png" />
            <span>你好</span>
          </li>
          <li class="right_word">
            <img src="img/person02.png" />
            <span>你好哦</span>
          </li>
        </ul>
        <!-- 右侧滚动条 -->
        <div class="drag_bar" style="display: none">
          <div
            class="drager ui-draggable ui-draggable-handle"
            style="display: none; height: 412.628px"
          ></div>
        </div>
      </div>
      <!-- 底部 消息编辑区域 -->
      <div class="footer">
        <img src="img/person02.png" alt="icon" />
        <!-- 输入框 -->
        <input type="text" placeholder="说的什么吧..." class="input_txt" />
        <!-- 发送按钮 -->
        <input type="button" value="发 送" class="input_sub" />
      </div>
    </div>

    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      // 调用 resetui 即可滚到底部
      // resetui()

      // 接口地址： http://ajax-api.itheima.net/api/robot
      // 聊天
      // 步骤：
      //  1.给发送按钮绑定事件
      //  2.将自己输入的内容渲染到dom上
      //  3.通过axios发送ajax请求获得Ai的回复
      //  4.将Ai的回复内容渲染到dom上

      //获取元素
      const sendBtn = document.querySelector('.input_sub')
      const textInput = document.querySelector('.input_txt')
      const talkList = document.querySelector('.talk_list')

      // 绑定事件
      sendBtn.addEventListener('click',function(){
        // 获取输入的内容
        const spoken = textInput .value.trim()

        if(!spoken)return alert('输入框不能为空')

        // 创建节点
        const personLi =document.querySelector('li')

        // 修改节点信息
        personLi.className = 'right_word'
        personLi.innerHTML =`<img src="img/person02.png" />
            <span>${spoken}</span>`
        
        // 把节点推入dom中
        talkList.appendChild(personLi)

        resetui()

        // 发送以后清空input
        textInput.value =''

        // 发送请求
        axios
        .get('http://www.liulongbin.top:3006/api/robot',{
          params:{spoken}
        })
        // 获取响应的数据
        .then(({data:res}) => {

          const robotText =res.data.info.text
          // 创建节点
          const robotLi = document.createElement('li')

          // 修改节点
          robotLi.className ='left_word'
          robotLi.innerHTML = ` <img src="img/person01.png" />
            <span>${robotText}</span>`
            
            // 把节点推入dom中
          talkList.appendChild(robotLi)
          
          resetui()
        })
      })
      textInput.addEventListener('keydown',function(e){
        if(e.key === 'Enter') sendBtn.click()
      })


    </script>




















<!-- 
      // btn.addEventListener('click', function () {
      //   // console.log(textIpt.value.trim())
      //   //封装自己输入的内容
      //   let myText = textIpt.value.trim()

      //   //判断输入框是否为空
      //   if (myText.length <= 0) return alert('输入框不能为空')

      //   textIpt.value = ''

      //   //1.创建一个dom元素
      //   let li = document.createElement('li')
      //   //2.填充内容
      //   li.innerHTML = `<img src="img/person02.png" />
      //       <span>${myText}</span>`
      //   //3.添加类名
      //   li.className = 'right_word'
      //   //4.将li添加到dom中
      //   talkList.appendChild(li)
      //   //滚动到底部
      //   resetui()

      //   //  3.通过axios发送ajax请求获得Ai的回复
      //   axios({
      //     url: 'http://www.liulongbin.top:3006/api/robot',
      //     method: 'GET',
      //     params: { spoken: myText },
      //   }).then(({ data: res }) => {
      //     const {
      //       data: {
      //         info: { text },
      //       },
      //     } = res

      //     //1.创建一个dom元素
      //     let li = document.createElement('li')
      //     //2.填充内容
      //     li.innerHTML = `<img src="img/person01.png" />
      //       <span>${text}</span>`
      //     //3.添加类名
      //     li.className = 'left_word'
      //     //4.将Ai的回复内容渲染到dom上
      //     talkList.appendChild(li)
      //     //滚动到底部
      //     resetui()
      //   })
      // })

      // textIpt.addEventListener('keyup', function (e) {
      //   console.log(1)
      //   if (e.keyCode === 13) {
      //     btn.click()
      //   }
      // }) -->
    </script>
  </body>
</html>
